<template>
    <div class="pad">
        <!-- table start -->
        <tableDataEl
            :page.sync="page"
            :pageSize.sync="pageSize"
            :tableData="tableData.list"
            :tableLabel="tableLabel"
            :pageCount="tableData.rows"
            @handleDetail="handleDetail"
            height="89vh"
            v-loading="loading"
        />
        <!--  table end-->

        <!-- dialog start -->
        <el-dialog
                :visible.sync="isShowDetail"
                title="物料详情"
                center
                width="40%"
                v-el-drag-dialog
                @close="Object.keys(paramsStr).forEach((key) => paramsStr[key] = '')"
        >
            <div v-loading="detailLoading">
                <el-form label-width="100px" label-position="left">
                    <el-form-item label="维修厂名称">
                        {{detailData['company']}}
                    </el-form-item>
                    <el-form-item label="维修厂电话">
                        {{detailData['phone']}}
                    </el-form-item>
                    <el-form-item label="详细地址">
                        {{detailData['province']}}{{detailData['city']}}{{detailData['county']}}
                    </el-form-item>
                    <el-form-item label="设置供应商">
                        <el-select v-model="paramsStr.gid" placeholder="请选择供应商">
                            <el-option
                                    v-for="item in gysArray"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-table
                        border
                        :data="detailData.detail"
                        style="margin-top:20px;"
                >
                    <el-table-column
                            label="物料名称"
                            prop="materiel"
                            align="center"
                            width="230"
                    />
                    <el-table-column
                            label="数量"
                            prop="num"
                            align="center"
                    />
                    <el-table-column
                            label="备注"
                            prop="remarks"
                            align="center"
                    />
                </el-table>

                <div style="text-align:center;margin-top:20px;">
                    <el-button type="primary" @click="adopt">通过</el-button>
                    <el-button type="warning" @click="reject">驳回</el-button>
                </div>
            </div>
            <el-dialog
                    :visible.sync="inputReason"
                    width="30%"
                    append-to-body
                    title="驳回理由"
                    v-el-drag-dialog
                    @close="$refs['childform'].resetFields()"
            >
                <el-form
                        ref="childform"
                        label-width="80px"
                        label-position="left"
                        :model="paramsStr"
                        :rules="rules"
                >
                    <el-form-item
                            label="驳回理由"
                            prop="reason"
                    >
                        <el-input
                                v-model="paramsStr.reason"
                                style="width:70%;margin-right:6%;"
                        >
                        </el-input>
                        <el-button type="primary" @click="configReject">驳回</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    export default {
        name: "material",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '维修厂名称',
                        prop: 'company',
                        empty: true
                    },
                    {
                        label: '负责人',
                        prop: 'leader',
                        empty:true
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '物料详情',
                        detail: true,
                        btnText: '详情',
                        methodName: 'handleDetail'
                    }
                ],
                isShowDetail: false,
                inputReason: false,
                detailData: {},
                gysArray:{},
                paramsStr:{
                    id: '',
                    gid: '',
                    phone: '',
                    reason: ''
                },
                loading: false,
                detailLoading: false,
                rules:{
                    reason: [
                        {required: true,message: '请输入驳回理由', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            async init (search = '') {
                this.loading = true;
                let paramsStr = Object.assign(search, {page:this.page, pageSize: this.pageSize});
                let res = await this.api.wlauditList(paramsStr);
                res.code ? this.tableData = res.data : this.$message(res.code);
                this.loading = false;
            },
            async handleDetail (...value) {
                this.isShowDetail = true;
                this.detailLoading = true;
                this.paramsStr['id'] = value[1]['id'];
                this.paramsStr['phone'] = value[1]['phone'];
                let res = await this.api.detail({id: value[1]['id']})
                this.detailData = res.data.list;
                this.gysArray = res.data.gid_array;
                this.detailLoading = false;
            },
            async adopt () {
                delete this.paramsStr['reason'];
                if(this.paramsStr['gid']) {
                    let res = await this.api.adopt(this.paramsStr);
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                    this.init();
                    this.isShowDetail = false
                }else {
                    this.$message({
                        type: 'error',
                        message: '请选择供应商！'
                    })
                }
            },
            reject () {
                this.inputReason = true;
            },
            async configReject () {
                let flag = true;
                this.$refs['childform'].validate((valid) => {
                    if(!valid) {
                        flag = false
                    }
                });
                if(flag) {
                    let res = await this.api.reject(this.paramsStr);
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                    this.init();
                    this.isShowDetail = false;
                    this.inputReason = false;
                }
            }
        },
        mounted () {
            this.init()
        },
        watch: {
            page () {
                this.init()
            },
            pageSize () {
                this.init()
            }
        }
    }
</script>

<style scoped>
    .pad {
        padding:10px;
    }
    .el-form-item {
        margin-bottom:5px;
    }
</style>
